<script lang="ts" setup>
import { useRouter } from 'vue-router'
// import { Search, Refresh } from '@element-plus/icons-vue'
import { HttpStatusCode } from 'axios'
import { ElMessage } from 'element-plus'
import { getDictItemPage } from '../../api/dict'
import AddForm from './components/AddForm/index.vue'
import DataTable from './components/DataTable/index.vue'
import UpdateForm from './components/UpdateForm/index.vue'

const router = useRouter()
let dictItemList = ref<ListDictItem[]>([])
let updateService = ref<ListDictItem>()
const pagination = reactive<Page>({})
let loading = ref(false)
const showAddBox = ref(false)
const showEditBox = ref(false)
//子组件方法
const tableRef = ref()

const changeShowAddBox = () => {
  showAddBox.value = !showAddBox.value
}
const changeShowEditBox = (formData: ListDictItem) => {
  showEditBox.value = !showEditBox.value
  updateService.value = formData
}
const cancelEditBox = () => {
  showEditBox.value = !showEditBox.value
}
const getData = async (page: number) => {
  loading.value = true
  let id = router.currentRoute.value.params.id as string
  const res = await getDictItemPage(page, id)
  if(res.statusCode === HttpStatusCode.Ok) {
    dictItemList.value = res.data.data as ListDictItem[]
    pagination.current = page
    pagination.total = res.data.total
    pagination.pageSize = res.data.pageRow
    loading.value = false
  } else {
    ElMessage({
      message: '获取失败，请重试',
      type: 'error',
    })
  }
}
const handleChange = (val: number) => {
  getData(val);
}
const manyDel = () => {
  tableRef.value.delMany()
}
const goBack = () => {
  router.push('/dictAdmin')
}

onMounted(() => {
  getData(1)
})
</script>

<template>
  <el-page-header class="page_header" @back="goBack">
    <template #content>
      <span> 字典属性管理 </span>
    </template>
  </el-page-header>
  <div class="header">
    <div class="btn_group">
      <el-button type="primary" class="add_btn" color="#232442" clearable @click="changeShowAddBox">添加</el-button>
      <el-button type="danger" class="add_btn" clearable @click="manyDel">删除</el-button>
    </div>
    <div class="search_group">
    </div>
  </div>
  <div class="bodyer">
    <DataTable ref="tableRef" :data-list="dictItemList" :loading="loading" @increase="getData" @update-data="changeShowEditBox" />
    <el-pagination class="page" background layout="prev, pager, next" :total="pagination.total"
                   :current-page="pagination.current"
                   @current-change="handleChange" />
  </div>
  <el-drawer
      v-model="showAddBox"
      title="添加"
      direction="rtl"
  >
    <AddForm :dict-id="router.currentRoute.value.params.id as string" @increase="getData" @closeShow="changeShowAddBox" />
  </el-drawer>
  <el-drawer
      v-model="showEditBox"
      title="修改"
      direction="rtl"
  >
    <UpdateForm :data-form="updateService as ListDictItem" @increase="getData" @closeShow="cancelEditBox" />
  </el-drawer>
</template>

<style lang="less" scoped>
@import '../../styles/baseAdmin.less';
.page_header {
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 5px;
}
</style>
